<template>
  <div class="text-center -translate-y-20 mt-20">
    <detail-list :songList="searchDetailList"></detail-list>
    <button class="btn btn-accent" @click="loadMore">加载更多</button>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import { onMounted, toRefs, ref } from "vue";
import { useSearchDetail } from "../../store/searchDetail";
import { useSongPlayStore } from "../../store/songPlay";
import detailList from "../../components/list/list.vue";
type Q = {
  keywords?: string;
};
type Query = {
  query: Q;
};
const { query }: Query = useRoute();
const { actionSearchDetail, searchDetailList, loadMore } = toRefs(useSearchDetail());
const { changeData } = toRefs(useSongPlayStore());
onMounted(() => {
  actionSearchDetail.value(query.keywords || "");
  actionSearchDetail.value(query.keywords || "", 1004);
  changeData.value(searchDetailList.value);
});
</script>

<style scoped></style>
